<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>知识库 - Web</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50">
    <div class="flex h-screen">
        <!-- Left Sidebar - Category Tree -->
        <div class="w-64 bg-white border-r overflow-y-auto">
            <div class="p-4 border-b">
                <h2 class="font-bold text-gray-800 mb-3">知识分类</h2>
                <button class="w-full bg-blue-500 text-white py-2 rounded-lg text-sm">
                    <i class="fas fa-plus mr-2"></i>新建条目
                </button>
            </div>
            
            <div class="p-4">
                <div class="space-y-2">
                    <div class="text-sm">
                        <div class="flex items-center py-2 px-2 hover:bg-gray-50 rounded cursor-pointer">
                            <i class="fas fa-chevron-down text-gray-400 mr-2"></i>
                            <i class="fas fa-folder text-blue-500 mr-2"></i>
                            <span class="font-semibold">工作</span>
                        </div>
                        <div class="ml-6 space-y-1">
                            <div class="flex items-center py-1 px-2 hover:bg-gray-50 rounded cursor-pointer">
                                <i class="fas fa-file-alt text-gray-400 mr-2"></i>
                                <span>前端开发</span>
                            </div>
                            <div class="flex items-center py-1 px-2 hover:bg-gray-50 rounded cursor-pointer">
                                <i class="fas fa-file-alt text-gray-400 mr-2"></i>
                                <span>后端开发</span>
                            </div>
                            <div class="flex items-center py-1 px-2 bg-blue-50 text-blue-600 rounded cursor-pointer">
                                <i class="fas fa-file-alt mr-2"></i>
                                <span>问题解决</span>
                            </div>
                        </div>
                    </div>

                    <div class="text-sm">
                        <div class="flex items-center py-2 px-2 hover:bg-gray-50 rounded cursor-pointer">
                            <i class="fas fa-chevron-right text-gray-400 mr-2"></i>
                            <i class="fas fa-folder text-green-500 mr-2"></i>
                            <span class="font-semibold">学习</span>
                        </div>
                    </div>

                    <div class="text-sm">
                        <div class="flex items-center py-2 px-2 hover:bg-gray-50 rounded cursor-pointer">
                            <i class="fas fa-chevron-right text-gray-400 mr-2"></i>
                            <i class="fas fa-folder text-purple-500 mr-2"></i>
                            <span class="font-semibold">生活</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="flex-1 flex flex-col">
            <!-- Header -->
            <div class="bg-white border-b p-6">
                <div class="flex justify-between items-center">
                    <div>
                        <h2 class="text-2xl font-bold text-gray-800">知识库</h2>
                        <p class="text-sm text-gray-600 mt-1">工作 / 问题解决</p>
                    </div>
                    <div class="flex gap-2">
                        <button class="px-4 py-2 bg-white border rounded-lg text-sm">
                            <i class="fas fa-search mr-2"></i>搜索
                        </button>
                        <button class="px-4 py-2 bg-white border rounded-lg text-sm">
                            <i class="fas fa-filter mr-2"></i>筛选
                        </button>
                    </div>
                </div>
            </div>

            <!-- Knowledge List -->
            <div class="flex-1 overflow-y-auto p-6">
                <div class="grid grid-cols-1 gap-4">
                    <!-- Knowledge Card 1 -->
                    <div class="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition cursor-pointer">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-lightbulb text-yellow-500 text-xl"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h3 class="text-lg font-bold text-gray-800">React Hooks 最佳实践总结</h3>
                                    <button class="text-gray-400 hover:text-gray-600">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                                <p class="text-sm text-gray-600 mb-3">
                                    详细总结了 useState、useEffect、useCallback、useMemo 等核心 Hooks 的使用技巧、
                                    常见陷阱和最佳实践。包含实际项目中的应用案例和性能优化建议。
                                </p>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-2 text-xs">
                                        <span class="bg-green-100 text-green-600 px-2 py-1 rounded">学习</span>
                                        <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded">React</span>
                                        <span class="bg-purple-100 text-purple-600 px-2 py-1 rounded">前端</span>
                                    </div>
                                    <div class="flex items-center text-xs text-gray-500">
                                        <span class="mr-4"><i class="far fa-eye mr-1"></i>128</span>
                                        <span><i class="far fa-calendar mr-1"></i>3天前</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Knowledge Card 2 -->
                    <div class="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition cursor-pointer">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-bug text-red-500 text-xl"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h3 class="text-lg font-bold text-gray-800">支付接口超时问题完整解决方案</h3>
                                    <button class="text-gray-400 hover:text-gray-600">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                                <p class="text-sm text-gray-600 mb-3">
                                    记录了支付接口超时问题的完整排查过程、根因分析和解决方案。通过增加重试机制、
                                    优化数据库查询和调整超时配置，将超时率从15%降低到2%以下。
                                </p>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-2 text-xs">
                                        <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded">工作</span>
                                        <span class="bg-purple-100 text-purple-600 px-2 py-1 rounded">后端</span>
                                        <span class="bg-orange-100 text-orange-600 px-2 py-1 rounded">支付</span>
                                    </div>
                                    <div class="flex items-center text-xs text-gray-500">
                                        <span class="mr-4"><i class="far fa-eye mr-1"></i>89</span>
                                        <span><i class="far fa-calendar mr-1"></i>1周前</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Knowledge Card 3 -->
                    <div class="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition cursor-pointer">
                        <div class="flex items-start">
                            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
                                <i class="fas fa-database text-blue-500 text-xl"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-start justify-between mb-2">
                                    <h3 class="text-lg font-bold text-gray-800">数据库索引优化实战经验</h3>
                                    <button class="text-gray-400 hover:text-gray-600">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                                <p class="text-sm text-gray-600 mb-3">
                                    总结了针对慢查询的分析方法、索引设计原则和优化技巧。包含 EXPLAIN 分析、
                                    覆盖索引、联合索引顺序等实用知识点。
                                </p>
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-2 text-xs">
                                        <span class="bg-blue-100 text-blue-600 px-2 py-1 rounded">工作</span>
                                        <span class="bg-purple-100 text-purple-600 px-2 py-1 rounded">数据库</span>
                                    </div>
                                    <div class="flex items-center text-xs text-gray-500">
                                        <span class="mr-4"><i class="far fa-eye mr-1"></i>156</span>
                                        <span><i class="far fa-calendar mr-1"></i>2周前</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
